<template>
  <view class="main-box">
     <u-loading-page style="z-index:999;" :loading="showLoading" bg-color="#e8e8e8" loading-text="loading..."></u-loading-page>
    <view class="my-date">
     <!--  <view class="my-date-input" @click="change">
        <view style="margin-right: 40rpx">{{ changeTimeDate(valueTime) }}</view>
        <u-image
          width="40rpx"
          height="40rpx"
          src="../../../static/images/dateTime.png"
        ></u-image>
      </view> -->
      <view class="my-date-input" style="padding-left:30rpx;width: 100%;"
				@click="change">
				<view style="margin-right: 30rpx; color: #fff">
					{{ valueTime }}
				</view>
				<u-image width="40rpx" height="40rpx" bgColor="red" src="../../../static/images/dateTime.png">
				</u-image>
				
			</view>
     <!--  <view class="my-date-select">
        <picker
          @change="bindPickerChange"
          :value="index"
          :range="userList"
          :range-key="'viewUserName'"
        >
          <view class="userSelectEnd">
            <view>
              {{ userList[index] ? userList[index].viewUserName : '' }}
            </view>
            <u-image
              style="margin-left: 12rpx"
              width="40rpx"
              height="40rpx"
              src="/static/images/down.png"
            ></u-image
          ></view>
        </picker>
      </view> -->
    </view>
    <view class="u-page__item">
      <image
        v-if="viewList.length === 0"
        style="margin-top: 120rpx;"
        width="100%"
        height="520rpx"
        src="../../../static/images/nodata.png"
      ></image>
      <view class="box">
        <view v-for="(viewItem, index) in viewList" :key="viewItem.id" style="border-bottom: 1rpx solid #d6dfec;
    padding: 10rpx 20rpx 20rpx 20rpx;">  
          <view class="my-title-box">
            <view class="my-title-item-box">
              <view style="display: flex; align-items: center">
                <u-image
                  style="margin-right: 20rpx"
                  width="20rpx"
                  height="20rpx"
                  :src="
                    viewItem.checked
                      ? '../../../static/images/yuan_a.png'
                      : '../../../static/images/yuan_aa.png'
                  "
                ></u-image>
                <text class="title" style="margin-left: 20rpx;color:#1a1a1a;font-size: 30rpx;">
                   {{ viewItem.leaderName }}
                </text>
              </view> 
            </view>
            <view
              class="callape-btn"
              @click="isShowClick(index, viewItem.checked)"
              >{{ viewItem.checked ? '收回' : '展开' }}
            </view>
          </view>
            <view class="sub-title">
                <text
                  style="font-size: 26rpx;max-width:240rpx; color: #606c81; "
                >
                 {{ viewItem.positionName }}
                </text>
                <text style="font-size: 26rpx; color: #606c81">
                 {{ viewItem.createTime }} 
                </text>
            </view>
           <view class="details" style="margin-top: 15rpx;background: url(https://daily.fangliyun.com/prod-api/profile/icon/backshui.png);"  :class="viewItem.checked && 'u-page__item_daily'" v-show="viewItem.checked">
            <view
              v-for="(infoItem, itemIndex) of viewItem.Content"
              :key="infoItem.key"
            >
              <view class="form-view-title"  v-if="infoItem.info"
                >{{ itemIndex+1 }}.{{ infoItem.info }}</view
              >
              <!-- <view class="form-view-text">
                {{ infoItem[`describe${itemIndex + 1}`] }}111
              </view> -->
              <view >
                <view
                  style="width:100%; "
                  v-for="(srcItem, index) of infoItem.imgUrl"
                  :key="srcItem.key"
                >
                  <image
                    v-if="fileFormatHandle(srcItem.url) != 'mp4'"
                    style="
                       width: 100%;
                      border: 1px solid #eee;
                    "
                    mode="widthFix"
                    @click="previewImg(srcItem.url, index)"
                    :lazy-load="true"
                    :webp="true"
                    :src="srcItem.url ? srcItem.url : ''"
                  ></image>
                  <video
                    style="
                      width: 100%; 
				              min-height: 400rpx;
                      border: 1px solid #eee;
                    "
                    v-if="fileFormatHandle(srcItem.url) == 'mp4'"
                    direction="0"
                    :src="srcItem.url"
                  ></video>
                </view>
              </view>
            </view>
          </view> 
        </view>
      </view>
    </view>
    <!-- 时间选择器 -->
    <u-datetime-picker
      :show="timeShow"
      @cancel="timeCancel"
      @confirm="timeConfirm"
      v-model="value"
      mode="date"
    ></u-datetime-picker>
  </view>
</template>
<script>
import { getUserList, selectOtherDailyByUserIdFun,selectViewAllDaily } from '@/service/services.js'
import { mapState } from 'vuex'
import { convertToChinaNum } from '@/utils/convertToChinaNum.js'
import moment from 'moment'
export default {
  // components: { uImage },
  data() {
    return {
      showLoading:false, //loading加载页
      index: 0,
      list: [],
      valueTime: '请选择日期',
      timeShow: false,
      selectShow: false,
      selectValue: '',
      value: moment(new Date()).format('YYYY-MM-DD'),
      viewList: [], // 保存消息列表
    }
  },
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
    this.getAllLeaderList()
  },
   onShow() {

  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
  }),
  methods: {
    getAllLeaderList(date){    
      this.showLoading=true
      this.viewList = []
       setTimeout(() => {
        this.showLoading=false
      }, 600); 
      selectViewAllDaily({createDate:date}).then(res =>{        
          res.data.forEach((item, index) => {
							this.viewList.push({
								id: item.id,
								userName: item.userName,
								createTime: item.createTime,
                leaderName:item.leaderName,
                positionName:item.positionName,
								checked: false,
								Content: [{
										key: Math.random() + item.content1,
										info: item.content1,
										describe1: item.describe1,
										imgUrl: [],
									},
									{
										key: Math.random() + item.content2,
										info: item.content2,
										describe2: item.describe2,
										imgUrl: [],
									},
									{
										key: Math.random() + item.content3,
										info: item.content3,
										describe3: item.describe3,
										imgUrl: [],
									},
								],
							})
							if (item.file1) {
								if (item.file1.indexOf(';', index + 1) === 1) {
									this.viewList[index].Content[0].imgUrl = [{
										key: Math.random(),
										url: item.file1,
									}, ]
								} else {
									const strArr = item.file1
										.substring(0, item.file1.lastIndexOf(';'))
										.split(';')
									const imgList = []
									strArr.forEach((info, index) => {
										imgList.push({
											key: Math.random(),
											url: info,
										})
									})
									this.viewList[index].Content[0].imgUrl = imgList
								}
							}
							if (item.file2) {
								if (item.file2.indexOf(';', index + 1) === 1) {
									this.viewList[index].Content[1].imgUrl = [{
										key: Math.random() + item.file2,
										url: item.file2,
									}, ]
								} else {
									const strArr = item.file2
										.substring(0, item.file2.lastIndexOf(';'))
										.split(';')
									const imgList = []
									strArr.forEach((info, index) => {
										imgList.push({
											key: Math.random(),
											url: info,
										})
									})
									this.viewList[index].Content[1].imgUrl = imgList
								}
							}
							if (item.file3) {
								if (item.file3.indexOf(';', index + 1) === 1) {
									this.viewList[index].Content[2].imgUrl = [{
										key: Math.random(),
										url: item.file3,
									}, ]
								} else {
									const strArr = item.file3
										.substring(0, item.file3.lastIndexOf(';'))
										.split(';')
									const imgList = []
									strArr.forEach((info, index) => {
										imgList.push({
											key: Math.random(),
											url: info,
										})
									})
									this.viewList[index].Content[2].imgUrl = imgList
								}
							}
						})
          
       })
    },

    fileFormatHandle(fileName) {
      return fileName.substring(fileName.lastIndexOf('.') + 1)
    },
    //预览图片，放大预览
    previewImg(currentUrl, index) {
      let imgsArray = []
      imgsArray[0] = currentUrl
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      })
    },
    bindPickerChange(e) {
      this.index = e.target.value
      this.selectUserObj = this.userList[e.target.value]
      this.getList({
        leaderid: this.selectUserObj.viewUserId,
        userId: this.userInfo.userId,
        createDate: this.valueTime,
      })
    },
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },

    imageError(e, index, itemIndex, imgIndex, i) {},
    changeNum(num) {
      return convertToChinaNum(num)
    },
    timeCancel() {
      this.timeShow = false
    },
    timeConfirm(e) {
      this.valueTime = this.changeTimeDate(e.value)
       this.getAllLeaderList(this.valueTime)
      /* this.getList({
        leaderid: this.selectUserObj.viewUserId,
        userId: this.userInfo.userId,
        createDate: this.valueTime,
      }) */
      this.timeShow = false
    },
    change() {
      this.timeShow = true
    },
    handleOtherSelectClose() {
      this.selectShow = false
    },

    handleSelect() {
      this.selectShow = true
    },
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },
    getList(parmas) {
      this.showLoading=true
      this.viewList = []
       setTimeout(() => {
        this.showLoading=false
      }, 600); 
      selectOtherDailyByUserIdFun({
        userId: parmas.userId,
        leaderid: parmas.leaderid,
        createDate: parmas.createDate,
      }).then((res) => {
        if (res.code === 200 && res.data.length)
          res.data.forEach((item, index) => {
            this.viewList.push({
              positionName: item.positionName,
              id: item.id,
              userName: item.userName,
              createTime: item.createTime,
              checked: false,
              Content: [
                {
                  key: Math.random() + item.content1,
                  info: item.content1,
                  describe1: item.describe1,
                  imgUrl: [],
                },
                {
                  key: Math.random() + item.content2,
                  info: item.content2,
                  describe2: item.describe2,
                  imgUrl: [],
                },
                {
                  key: Math.random() + item.content3,
                  info: item.content3,
                  describe3: item.describe3,
                  imgUrl: [],
                },
              ],
            })
            if (item.file1) {
              if (item.file1.indexOf(';', index + 1) === 1) {
                this.viewList[index].Content[0].imgUrl = [
                  {
                    key: Math.random() + item.file1,
                    url: item.file1,
                  },
                ]
              } else {
                const strArr = item.file1
                  .substring(0, item.file1.lastIndexOf(';'))
                  .split(';')
                const imgList = []
                strArr.forEach((info, index) => {
                  imgList.push({
                    key: Math.random() + info,
                    key: index + 'v',
                    url: info,
                  })
                })
                this.viewList[index].Content[0].imgUrl = imgList
              }
            }
            if (item.file2) {
              if (item.file2.indexOf(';', index + 1) === 1) {
                this.viewList[index].Content[1].imgUrl = [
                  {
                    key: Math.random() + item.file2,
                    url: item.file2,
                  },
                ]
              } else {
                const strArr = item.file2
                  .substring(0, item.file2.lastIndexOf(';'))
                  .split(';')
                const imgList = []
                strArr.forEach((info, index) => {
                  imgList.push({
                    key: Math.random() + info,
                    url: info,
                  })
                })
                this.viewList[index].Content[1].imgUrl = imgList
              }
            }
            if (item.file3) {
              if (item.file3.indexOf(';', index + 1) === 1) {
                this.viewList[index].Content[2].imgUrl = [
                  {
                    key: Math.random() + item.file3 + index,
                    url: item.file3,
                  },
                ]
              } else {
                const strArr = item.file3
                  .substring(0, item.file3.lastIndexOf(';'))
                  .split(';')
                const imgList = []
                strArr.forEach((info, index) => {
                  imgList.push({
                    key: Math.random() + info + index,
                    url: info,
                  })
                })
                this.viewList[index].Content[2].imgUrl = imgList
              }
            }
          })
      })
    },
    // 点击actionSheet回调
    actionSheetCallback(index) {
      this.selectValue = this.actionSheetList[index].text
    },
    sexSelect(e) {},
    // 点击是否显示全文
    isShowClick(index, checked) { 
     this.viewList[index].checked === true ?  this.viewList[index].checked = false : this.viewList[index].checked = true;   
    },
  },
}
</script>

<style lang="scss" scoped>
.u-page__item {
  margin: 0 32rpx !important;
  border:1px solid #c1c6d3;
  box-sizing: border-box;
  background-color: #fff;
  .box {
    margin-bottom: 32rpx;
  }
}
.u-page__item__title__slot-title {
  height: 80rpx;
  line-height: 80rpx;
}
.u-page__item_daily {
  background: #f8f8f8;
  border: 1rpx solid #d1d7df;
  box-shadow: 0px 2rpx 8rpx 0px #d0d6df;
  border-radius: 1rpx;
  padding: 30rpx;
  min-height: 400rpx;
}
.view_img {
  display: flex;
  flex-wrap: wrap;
  // justify-content: center;
  .view_img_item {
    margin: 10rpx 4px 0rpx 4rpx;
  }
}
.message_icon {
  width: 20rpx;
  height: 20rpx;
  background: #2b4fa3;
  border-radius: 50%;
  display: inline-block;
  margin-right: 22rpx;
}
.u-page {
  padding: 0;

  &__item {
    padding: 0 30rpx;
    min-height: 520px;
    &__title {
      background-color: $u-bg-color;
      padding: 15px;
      font-size: 15px;
      &__slot-title {
        font-size: 14px;
      }
    }
  }
}
.imgDetails {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30rpx;
  
}
.u-collapse-content {
  color: $u-tips-color;
  font-size: 14px;
}
.my-date {
    position: relative;
		display: flex;
		margin: 0 32rpx;
		padding: 17rpx 0;
		height: 59rpx;
		background: #05163E;
 }

.title {
  font-size: 30rpx;
  color: #606c81;
  margin-left: 32rpx;
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #f5f9ff;
  .my-title-box {
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
  .my-title-item-box {
    font-weight: bold;
    color: #606c81; 
  }
  .sub-title {
      padding-left: 40rpx;
      margin-top: -10rpx;
      display: flex;
      justify-content: space-between;
    }
  .textDetails {
    margin: 20rpx 0rpx 32rpx 0rpx;
    height: 24rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    line-height: 30rpx;
  }
}
.containerBody {
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 24rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: 4rpx;
  width: 100%;
}
.font{
	font-weight: bold;
}
</style>
